<template>
	<view class="">
		<u-popup v-model="show" mode="bottom"  width="90%" style="z-index: 99999999999;">
			<view class="popup">
				<u-field v-model="mobile" placeholder="请输入缴费手机号">
				</u-field>
				<u-field placeholder="输入验证码" v-model="sms">
					<template v-slot:right>
						<view class="">
							<button size="mini" type="primary" :disabled="disabled"
								@tap='getCode'>{{getCodeText}}</button>
							<!-- <button :disabled="disabled" class="getCode" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
							</button> -->
						</view>
		
					</template>
				</u-field>
				<button type="primary" class="m_t_18" @tap="login">登录</button>
			</view>
		</u-popup>
		<image src="https://web.78keji.cn/images/tcxcx/topxs.png" mode="widthFix" style="width: 100%;"></image>
		<view class="d_f a_i_c" style="position: absolute;top: 60rpx;left: 48rpx;" >
			<image src="https://web.78keji.cn/images/tcxcx/tx.png" mode="widthFix" style="width: 80rpx;" ></image>
			<view class="" style="margin-left: 22rpx;color: white;font-size: 36rpx" v-if="!mobiles" @click="show=true">
				请先登录
			</view>
			<view class="d_f a_i_c" style="margin-left: 22rpx;color: white;font-size: 36rpx;width: 100%;justify-content: space-around;"  v-else>
				<view class="">
					{{mobiles}}
				</view>
				<view class="" style="margin-left: 200rpx;">
					<image src="https://web.78keji.cn/images/tcxcx/change.png" mode="widthFix" style="width: 120rpx;" @click="out"></image>
				</view>
					
			</view>
		</view>
	
	
		<view class="" style="height: 400rpx;background-color: #f8f8f8;z-index: 1;position: relative;">
			<u-cell-group>
				<u-cell-item icon="file-text" title="我的订单" :arrow="true" arrow-direction="down" @click='dingdan'></u-cell-item>
				<u-cell-item icon="setting" title="车辆管理" :arrow="true" @click='car'></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		getid,
		getnew,
		sendSms,
		loginx
	} from '../../api/index.js'
	export default {
			data() {
				return {
	show:false,
	mobile:"",
	getCodeText: '获取验证码',
	getCodeBtnColor: "#ffffff",
	getCodeisWaiting: false,
	disabled: false,
	mobiles:'',
	sms:"",
	token:''
				};
			},
			onLoad() {
				if(uni.getStorageSync('token')){
					this.token=uni.getStorageSync('token')
					this.mobiles=uni.getStorageSync('phone')
					console.log(this.token,this.mobile)
				}
			},
			
			methods:{
				out(){
					uni.clearStorage()
					this.mobiles=''
				},
				login() {
				
					loginx({
						mobile: this.mobile,
						event: "pay",
						a: '666666',
						captcha: this.sms
					}).then((res) => {
						console.log(res)
						if (res.code == 1) {
							
							this.show = false
				this.mobiles=res.data.user.mobile
							uni.setStorageSync('token', res.data.token)
							uni.setStorageSync('phone', res.data.user.mobile)}
						
					})
				
				},
				
				getCode() {
				
					sendSms({
						mobile: this.mobile,
						event: "pay",
						type: 1
					}).then((res) => {
						this.disabled = true
						this.getCodeText = "发送中..." //发送验证码
						this.getCodeisWaiting = true;
						setTimeout(() => {
							//this.$common.msg('验证码已发送')
							uni.showToast({
								title: '验证码已发送',
								icon: "none"
							}); //弹出提示框
							this.setTimer(); //调用定时器方法
						}, 1000)
					})
					//示例用定时器模拟请求效果
					//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				
				},
				setTimer() {
					let holdTime = 60; //定义变量并赋值
					this.getCodeText = "重新获取(60)"
					//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
					//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
					this.Timer = setInterval(() => {
						if (holdTime <= 0) {
							this.disabled = false
							this.getCodeisWaiting = false;
							this.getCodeBtnColor = "#ffffff";
							this.getCodeText = "获取验证码"
							clearInterval(this.Timer); //清除该函数
							return; //返回前面
						}
						this.getCodeText = "重新获取(" + holdTime + ")"
						holdTime--;
					}, 1000)
				},
				dingdan(){
					uni.navigateTo({
						url:'/pages/my_order/my_order'
					})
				},
				car(){
					uni.navigateTo({
						url:'/pages/my_car/my_car'
					})
				}
			},
			onShow(){
			
			}
		}
</script>

<style>
	.popup{
		background-color: white;
		padding: 20rpx;
	}
	
</style>